<template>
	<view class="container">
		<!-- 时间查询条件 -->
		<view class="time-filter" v-if="groupBy != 'all'">
			<view class="filter-item2" @click="showTimePopup = true">
				<view class="filter-text">{{selectedTimeText}}</view>
				<u-icon name="arrow-down" size="24" color="#666"></u-icon>
			</view>
		</view>
		
		<!-- 筛选条件 -->
		<view class="filter-section">
			<!-- 分组维度选择 -->
			<view class="filter-item">
				<view class="filter-label">统计维度</view>
				<view class="dimension-tabs">
					<view 
						class="dimension-tab" 
						:class="{ active: groupBy === 'all' }"
						@click="selectDimension('all')"
					>
						<text>全部汇总</text>
					</view>
					<view 
						class="dimension-tab" 
						:class="{ active: groupBy === 'time' }"
						@click="selectDimension('time')"
					>
						<text>按时间</text>
					</view>
					<view 
						class="dimension-tab" 
						:class="{ active: groupBy === 'shop' }"
						@click="selectDimension('shop')"
					>
						<text>按店铺</text>
					</view>
				</view>
			</view>
			
			<!-- 店铺选择（按店铺时可选，用于筛选特定店铺） -->
			<!-- <view class="filter-item" v-if="groupBy === 'shop'">
				<view class="filter-label">店铺筛选（可选）</view>
				<shop-selector 
					v-model="shopModel" 
					:shop-list="officeSelectList" 
					:field-config="{
						valueField: 'dictValue',
						labelField: 'dictLabel',
						displayField: 'dictLabel',
						placeholder: '请选择店铺（不选则查询所有店铺）',
						codeField: 'officeCode',
						nameField: 'officeName'
					}"
				></shop-selector>
			</view> -->
			
		</view>
		
		<!-- 全部汇总结果 -->
		<view class="result-section" v-if="groupBy === 'all' && reportData">
			<view class="result-card">
				<view class="result-item">
					<text class="result-label">进价合计</text>
					<text class="result-value amount">¥{{ formatMoney(reportData.totalAmount) }}</text>
				</view>
				<view class="result-item">
					<text class="result-label">{{type == '2' ? '零售价合计' : '销量合计'}}</text>
					<text class="result-value amount">¥{{ formatMoney(reportData.totalCostAmount) }}</text>
				</view>
				<view class="result-item">
					<text class="result-label">订单数量</text>
					<text class="result-value">{{ reportData.orderCount || 0 }}</text>
				</view>
			</view>
		</view>
		
		<!-- 按时间分组列表 -->
		<view class="list-section" v-if="groupBy === 'time' && reportList.length > 0">
			<scroll-view class="list-scroll" scroll-y>
				<view 
					class="list-item" 
					v-for="(item, index) in reportList" 
					:key="index"
				>
					<view class="item-header">
						<text class="item-title">{{ item.date }}</text>
					</view>
					<view class="item-content">
						<view class="item-row">
							<text class="item-label">进价合计</text>
							<text class="item-value amount">¥{{ formatMoney(item.totalAmount) }}</text>
						</view>
						<view class="item-row">
							<text class="item-label">{{type == '2' ? '零售价合计' : '销量合计'}}</text>
							<text class="item-value amount">¥{{ formatMoney(item.totalCostAmount) }}</text>
						</view>
						<view class="item-row">
							<text class="item-label">订单数量</text>
							<text class="item-value">{{ item.orderCount || 0 }}</text>
						</view>
					</view>
				</view>
			</scroll-view>
			
			<!-- 合计栏 -->
			<view class="summary-bar">
				<view class="summary-content">
					<text class="summary-label">合计：</text>
					<text class="summary-count">{{ reportList.length }}天</text>
					<text class="summary-amount">¥{{ formatMoney(totalAmount) }}</text>
				</view>
			</view>
		</view>
		
		<!-- 按店铺分组列表 -->
		<view class="list-section" v-if="groupBy === 'shop' && reportList.length > 0">
			<scroll-view class="list-scroll" scroll-y>
				<view 
					class="list-item" 
					v-for="(item, index) in reportList" 
					:key="index"
				>
					<view class="item-header">
						<text class="item-title">{{ item.shopName || item.shopCode || '未知店铺' }}</text>
					</view>
					<view class="item-content">
						<view class="item-row">
							<text class="item-label">进价合计</text>
							<text class="item-value amount">¥{{ formatMoney(item.totalAmount) }}</text>
						</view>
						<view class="item-row">
							<text class="item-label">{{type == '2' ? '零售价合计' : '销量合计'}}</text>
							<text class="item-value amount">¥{{ formatMoney(item.totalCostAmount) }}</text>
						</view>
						<view class="item-row">
							<text class="item-label">订单数量</text>
							<text class="item-value">{{ item.orderCount || 0 }}</text>
						</view>
					</view>
				</view>
			</scroll-view>
			
			<!-- 合计栏 -->
			<view class="summary-bar">
				<view class="summary-content">
					<text class="summary-label">合计：</text>
					<text class="summary-count">{{ reportList.length }}个店铺</text>
					<text class="summary-amount">¥{{ formatMoney(totalAmount) }}</text>
				</view>
			</view>
		</view>
		
		<!-- 空状态 -->
		<view class="empty-container" v-if="!loading && ((groupBy === 'all' && !reportData) || (groupBy !== 'all' && reportList.length === 0))">
			<text class="empty-text">请选择查询条件后点击查询</text>
		</view>
		
		<!-- 加载状态 -->
		<view class="loading-container" v-if="loading">
			<text class="loading-text">加载中...</text>
		</view>
		
		<!-- 时间选择弹窗 -->
		<u-popup v-model="showTimePopup" mode="bottom" border-radius="0">
			<view class="time-popup">
				<view class="popup-header">
					<view class="title">请选择时间范围</view>
				</view>
				<scroll-view class="popup-content" scroll-y="true">
					<view class="time-option" 
						v-for="(item, index) in timeOptions" 
						:key="index"
						@click="selectTimeOption(item)">
						<view class="option-text">{{item.label}}</view>
					</view>
				</scroll-view>
			</view>
		</u-popup>
		
		<!-- 自定义时间选择弹窗 -->
		<u-popup v-model="showCustomDatePopup" mode="bottom" border-radius="0">
			<view class="date-picker-popup">
				<view class="date-header">请选择时间范围</view>
				<view class="date-display">{{tempStartDate}}~{{tempEndDate}}</view>
				<view class="date-tabs">
					<view class="tab-item" :class="{'active': isSelectingStart}" @click="switchToStart">
						<text>{{tempStartDate}} 开始</text>
					</view>
					<view class="tab-item" :class="{'active': !isSelectingStart}" @click="switchToEnd">
						<text>{{tempEndDate}} 结束</text>
					</view>
				</view>
				<view class="picker-labels">
					<text class="label-item">年</text>
					<text class="label-item">月</text>
					<text class="label-item">日</text>
				</view>
				<view class="picker-container">
					<picker-view class="picker-view" :indicator-style="indicatorStyle" :value="pickerValue" @change="onPickerChange">
						<picker-view-column>
							<view class="picker-item" v-for="year in years" :key="year">{{year}}</view>
						</picker-view-column>
						<picker-view-column>
							<view class="picker-item" v-for="month in months" :key="month">{{month.padStart(2, '0')}}</view>
						</picker-view-column>
						<picker-view-column>
							<view class="picker-item" v-for="day in days" :key="day">{{day.padStart(2, '0')}}</view>
						</picker-view-column>
					</picker-view>
				</view>
				<view class="picker-actions">
					<view class="picker-btn cancel" @click="cancelDatePicker">取消</view>
					<view class="picker-btn confirm" @click="confirmDatePicker">完成</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
export default {
		data() {
		return {
			type: '', // 订单类型，从页面参数获取
			groupBy: 'all', // 分组维度：all-全部汇总, time-按时间, shop-按店铺
			dateRange: [], // 日期范围 [开始日期, 结束日期]
			startDate: '', // 开始日期
			endDate: '', // 结束日期
			shopModel: {}, // 店铺选择模型
			officeSelectList: [], // 店铺列表
			reportData: null, // 全部汇总数据
			reportList: [], // 分组列表数据
			loading: false, // 加载状态
			minDate: '2020-01-01', // 最小日期
			maxDate: '', // 最大日期（当前日期）
			// 时间选择相关
			showTimePopup: false, // 显示时间选择弹窗
			showCustomDatePopup: false, // 显示自定义日期选择弹窗
			selectedTimeOption: 'month', // 选中的时间选项，默认本月
			timeOptions: [
				{ label: '全部', value: 'all' },
				{ label: '今日', value: 'today' },
				{ label: '昨日', value: 'yesterday' },
				{ label: '本月', value: 'month' },
				{ label: '上个月', value: 'lastMonth' },
				{ label: '其它时间', value: 'custom' }
			],
			// 时间选择器相关
			pickerValue: [2, 3, 1], // 默认选中值
			years: [], // 年份选项
			months: [], // 月份选项
			days: [], // 日期选项
			tempStartDate: '', // 临时开始日期
			tempEndDate: '', // 临时结束日期
			isSelectingStart: true, // 是否正在选择开始日期
			indicatorStyle: 'height: 80rpx; border-top: 1px solid #e5e5e5; border-bottom: 1px solid #e5e5e5;',
		}
	},
	computed: {
		// 计算总金额
		totalAmount() {
			return this.reportList.reduce((sum, item) => {
				return sum + (parseFloat(item.totalAmount) || 0)
			}, 0)
		},
		// 时间选择显示文本
		selectedTimeText() {
			const option = this.timeOptions.find(item => item.value === this.selectedTimeOption)
			if (this.selectedTimeOption === 'custom' && this.startDate && this.endDate) {
				return `${this.startDate} 至 ${this.endDate}`
			}
			return option ? option.label : '本月'
		}
	},
	onLoad(params) {
		// 从页面参数获取 type
		if (params.type) {
			this.type = params.type
		}
		
		// 设置最大日期为当前日期
		const today = new Date()
		this.maxDate = `${today.getFullYear()}-${String(today.getMonth() + 1).padStart(2, '0')}-${String(today.getDate()).padStart(2, '0')}`
		
		// 设置默认时间范围：本月
		this.setDefaultTimeRange()
		
		// 设置页面标题
		let title = '订单统计报表'
		if (this.type == '1') {
			title = '客户下单统计'
		} else if (this.type == '2') {
			title = '商家进货统计'
		}
		uni.setNavigationBarTitle({
			title: title
		})
		
		// 加载店铺列表
		this.loadShopList()
	},
	methods: {
		// 选择分组维度
		selectDimension(dimension) {
			this.groupBy = dimension
			// 清空数据
			this.reportData = null
			this.reportList = []
			// 自动查询
			this.loadReport()
		},
		
		// 加载店铺列表
		loadShopList() {
			this.$u.api.office.treeData({}).then(res => {
				if (res && Array.isArray(res)) {
					// 将树形结构转换为扁平列表
					this.officeSelectList = this.flattenOfficeList(res)
				}
			}).catch(err => {
				console.error('加载店铺列表失败:', err)
			})
		},
		
		// 扁平化店铺列表
		flattenOfficeList(list) {
			let result = []
			list.forEach(item => {
				if (item.dictValue && item.dictLabel) {
					result.push({
						dictValue: item.dictValue,
						dictLabel: item.dictLabel,
						officeCode: item.dictValue,
						officeName: item.dictLabel
					})
				}
				if (item.children && item.children.length > 0) {
					result = result.concat(this.flattenOfficeList(item.children))
				}
			})
			return result
		},
		
		// 设置默认时间范围
		setDefaultTimeRange() {
			const now = new Date()
			const year = now.getFullYear()
			const month = now.getMonth()
			const date = now.getDate()
			
			switch (this.selectedTimeOption) {
				case 'all':
					// 全部时间，设置为最早时间到当前时间
					this.startDate = this.minDate
					this.endDate = this.maxDate
					break
				case 'today':
					// 今天
					this.startDate = this.formatDate(now)
					this.endDate = this.formatDate(now)
					break
				case 'yesterday':
					// 昨天
					const yesterday = new Date(now)
					yesterday.setDate(date - 1)
					this.startDate = this.formatDate(yesterday)
					this.endDate = this.formatDate(yesterday)
					break
				case 'month':
					// 本月
					this.startDate = `${year}-${String(month + 1).padStart(2, '0')}-01`
					this.endDate = this.formatDate(now)
					break
				case 'lastMonth':
					// 上个月
					this.startDate = `${year}-${String(month).padStart(2, '0')}-01`
					// 获取上个月的最后一天
					const lastDayOfLastMonth = new Date(year, month, 0).getDate()
					this.endDate = `${year}-${String(month).padStart(2, '0')}-${lastDayOfLastMonth}`
					break
				case 'custom':
					// 自定义时间，保持原有值
					break
			}
			
			this.dateRange = [this.startDate, this.endDate]
		},
		
		// 选择时间选项
		selectTimeOption(item) {
			this.selectedTimeOption = item.value
			if (item.value === 'custom') {
				this.showTimePopup = false
				this.isSelectingStart = true
				// 初始化日期选择器
				this.initDatePicker()
				// 设置临时日期
				this.tempStartDate = this.startDate || this.formatDate(new Date())
				this.tempEndDate = this.endDate || this.formatDate(new Date())
				// 设置开始日期的picker值
				const startDate = new Date(this.tempStartDate)
				this.setPickerValue(startDate)
				this.showCustomDatePopup = true
			} else {
				this.setDefaultTimeRange()
				this.showTimePopup = false
				// 自动查询
				this.loadReport()
			}
		},
		
		// 切换到选择开始日期
		switchToStart() {
			this.isSelectingStart = true
			// 设置当前选中的日期对应的 picker 值
			const startDate = this.tempStartDate ? new Date(this.tempStartDate) : new Date()
			this.setPickerValue(startDate)
			this.updateDays()
		},
		
		// 切换到选择结束日期
		switchToEnd() {
			this.isSelectingStart = false
			// 设置当前选中的日期对应的 picker 值
			const endDate = this.tempEndDate ? new Date(this.tempEndDate) : new Date()
			this.setPickerValue(endDate)
			this.updateDays()
		},
		
		// 设置picker的值
		setPickerValue(date) {
			const yearIndex = this.years.findIndex(year => year === date.getFullYear())
			const monthIndex = date.getMonth() // 月份从0开始
			const dayIndex = date.getDate() - 1 // 日期从1开始
			this.pickerValue = [yearIndex, monthIndex, dayIndex]
		},
		
		// 初始化日期选择器
		initDatePicker() {
			// 生成年份选项（前5年到后5年）
			const currentYear = new Date().getFullYear()
			this.years = []
			for (let i = currentYear - 5; i <= currentYear + 5; i++) {
				this.years.push(i)
			}
			
			// 生成月份选项 (1-12)
			this.months = Array.from({length: 12}, (_, i) => String(i + 1))
			
			// 生成日期选项
			this.updateDays()
			
			// 设置默认值为当前日期
			const now = new Date()
			this.setPickerValue(now)
		},
		
		// 更新日期选项
		updateDays() {
			const year = this.years[this.pickerValue[0]]
			const month = parseInt(this.months[this.pickerValue[1]])
			const daysInMonth = new Date(year, month, 0).getDate()
			this.days = Array.from({length: daysInMonth}, (_, i) => String(i + 1))
		},
		
		// picker变化事件
		onPickerChange(e) {
			this.pickerValue = e.detail.value
			this.updateDays()
			
			const year = this.years[this.pickerValue[0]]
			const month = this.months[this.pickerValue[1]].padStart(2, '0')
			const day = this.days[this.pickerValue[2]].padStart(2, '0')
			const dateStr = `${year}-${month}-${day}`
			
			if (this.isSelectingStart) {
				this.tempStartDate = dateStr
			} else {
				this.tempEndDate = dateStr
			}
		},
		
		// 取消日期选择
		cancelDatePicker() {
			this.showCustomDatePopup = false
			// 重置临时日期
			this.tempStartDate = this.startDate
			this.tempEndDate = this.endDate
			this.isSelectingStart = true
		},
		
		// 确认日期选择
		confirmDatePicker() {
			const startDate = new Date(this.tempStartDate)
			const endDate = new Date(this.tempEndDate)
			
			if (endDate < startDate) {
				uni.showToast({
					title: '结束日期不能早于开始日期',
					icon: 'none'
				})
				return
			}
			
			this.startDate = this.tempStartDate
			this.endDate = this.tempEndDate
			this.dateRange = [this.startDate, this.endDate]
			this.showCustomDatePopup = false
			// 自动查询
			this.loadReport()
		},
		
		// 格式化日期
		formatDate(date) {
			const year = date.getFullYear()
			const month = String(date.getMonth() + 1).padStart(2, '0')
			const day = String(date.getDate()).padStart(2, '0')
			return `${year}-${month}-${day}`
		},
		
		// 加载报表数据
		loadReport() {
			// 按时间分组时，需要日期范围
			if (this.groupBy === 'time' && (!this.startDate || !this.endDate)) {
				uni.showToast({
					title: '请选择时间范围',
					icon: 'none'
				})
				return
			}
			
			this.loading = true
			this.reportData = null
			this.reportList = []
			
			const params = {}
			
			// 添加日期参数
			if (this.startDate && this.groupBy != 'all') {
				params.startDate = this.startDate
			}
			if (this.endDate && this.groupBy != 'all') {
				params.endDate = this.endDate
			}
			
			// 添加店铺参数（按店铺分组时，如果选择了特定店铺）
			if (this.groupBy === 'shop' && this.shopModel && this.shopModel.officeCode) {
				params.shopCode = this.shopModel.officeCode
			}
			
			// 添加订单类型参数
			if (this.type) {
				params.type = this.type
			}
			
			// 添加分组参数
			if (this.groupBy === 'time') {
				params.groupBy = 'date'
			} else if (this.groupBy === 'shop') {
				params.groupBy = 'shop'
			}
			// groupBy === 'all' 时不传 groupBy 参数
			
			this.$u.api.wallet.orderReport(params).then(res => {
				this.loading = false
				
				console.log('报表API响应:', res)
				
				// 兼容响应格式：result='true'
				if (res && (res.result == 'true' || res.result === true)) {
					let data = res.data
					
					if (this.groupBy === 'all') {
						// 不分组：data 可能是对象或数组（数组时取第一个元素）
						if (Array.isArray(data) && data.length > 0) {
							data = data[0]
						}
						this.reportData = {
							totalAmount: data.totalAmount || 0,
							totalCostAmount: data.totalCostAmount || 0,
							orderCount: data.orderCount || 0
						}
					} else {
						// 分组：data 是数组
						if (Array.isArray(data) && data.length > 0) {
							this.reportList = data.map(item => ({
								date: item.date || '',
								shopCode: item.shopCode || '',
								shopName: item.shopName || '',
								totalAmount: item.totalAmount || 0,
								totalCostAmount: item.totalCostAmount || 0,
								orderCount: item.orderCount || 0
							}))
						} else {
							this.reportList = []
						}
					}
				} else {
					uni.showToast({
						title: res.message || '查询失败',
						icon: 'none'
					})
				}
			}).catch(err => {
				this.loading = false
				console.error('加载报表失败:', err)
				uni.showToast({
					title: '查询失败，请重试',
					icon: 'none'
				})
			})
		},
		
		// 格式化金额
		formatMoney(value) {
			if (value === null || value === undefined || value === '') {
				return '0.00'
			}
			const num = parseFloat(value)
			if (isNaN(num)) {
				return '0.00'
			}
			return num.toFixed(2)
		}
	}
}
</script>

<style scoped>
.container {
	background-color: #f5f5f5;
	min-height: 100vh;
	padding-bottom: 40rpx;
}

/* 筛选条件区域 */
.filter-section {
	position: fixed;
	top: 110rpx;
	left: 0;
	right: 0;
	background-color: #ffffff;
	padding: 30rpx;
	padding-top: 30rpx;
	border-bottom: 1px solid #f0f0f0;
	z-index: 99;
	box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
}
/* #ifdef APP-PLUS */
.filter-section {
	top: 0rpx;
}
/* #endif */
.filter-item {
	margin-bottom: 30rpx;
}

.filter-item:last-child {
	margin-bottom: 0;
}

.filter-label {
	font-size: 28rpx;
	color: #333333;
	margin-bottom: 16rpx;
	font-weight: 500;
}

.filter-value {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 20rpx 24rpx;
	background-color: #f5f5f5;
	border-radius: 8rpx;
	font-size: 28rpx;
	color: #333333;
}

.filter-value text {
	flex: 1;
}

/* 日期范围选择器 */
.date-range-wrapper {
	display: flex;
	align-items: center;
	gap: 20rpx;
}

.date-picker {
	flex: 1;
}

.date-separator {
	font-size: 28rpx;
	color: #666666;
	padding: 0 10rpx;
}

/* 维度选择标签 */
.dimension-tabs {
	display: flex;
	gap: 20rpx;
}

.dimension-tab {
	flex: 1;
	padding: 20rpx 0;
	text-align: center;
	background-color: #f5f5f5;
	border-radius: 8rpx;
	font-size: 28rpx;
	color: #666666;
}

.dimension-tab.active {
	background-color: #667eea;
	color: #ffffff;
}

.dimension-tab text {
	font-weight: 500;
}

/* 时间查询条件 */
.time-filter {
	padding: 0rpx 30rpx;
	background-color: #fff;
	position: fixed;
	right: 0;
    width: 60%;
    z-index: 9999;
	
	
}
.filter-item2 {
	display: flex;
	justify-content: flex-end;
	align-items: center;
	height: 70rpx;
	padding: 0 20rpx;
}
.filter-text {
	margin-right: 10rpx;
	font-size: 28rpx;
	color: #333;
}
/* 结果区域 */
.result-section {
	padding: 0 30rpx;
	padding-top: 200rpx;
}

.result-card {
	background-color: #ffffff;
	border-radius: 16rpx;
	padding: 40rpx;
	margin-bottom: 20rpx;
	box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
}

.result-item {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 24rpx 0;
	border-bottom: 1px solid #f0f0f0;
}

.result-item:last-child {
	border-bottom: none;
}

.result-label {
	font-size: 28rpx;
	color: #666666;
}

.result-value {
	font-size: 32rpx;
	color: #333333;
	font-weight: bold;
}

.result-value.amount {
	font-size: 36rpx;
	color: #667eea;
}

/* 列表区域 */
.list-section {
	position: relative;
	min-height: calc(100vh - 400rpx);
	max-height: calc(100vh - 400rpx);
	padding-top: 200rpx;
}

.list-scroll {
	height: calc(100vh - 420rpx);
	padding: 0 30rpx;
	box-sizing: border-box;
}

.list-item {
	background-color: #ffffff;
	border-radius: 16rpx;
	padding: 30rpx;
	margin-bottom: 20rpx;
	box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
}

.item-header {
	margin-bottom: 20rpx;
	padding-bottom: 16rpx;
	border-bottom: 1px solid #f0f0f0;
}

.item-title {
	font-size: 32rpx;
	color: #333333;
	font-weight: bold;
}

.item-content {
	margin-top: 16rpx;
}

.item-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 12rpx 0;
	font-size: 28rpx;
}

.item-label {
	color: #666666;
}

.item-value {
	color: #333333;
	font-weight: 500;
}

.item-value.amount {
	color: #667eea;
	font-weight: bold;
}

/* 合计栏 */
.summary-bar {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: #ffffff;
	border-top: 1px solid #f0f0f0;
	box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
	z-index: 100;
}

.summary-content {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 20rpx 30rpx;
	padding-bottom: calc(20rpx + env(safe-area-inset-bottom));
}

.summary-label {
	font-size: 28rpx;
	color: #333333;
	font-weight: bold;
}

.summary-count {
	font-size: 26rpx;
	color: #666666;
	margin-left: 20rpx;
}

.summary-amount {
	font-size: 36rpx;
	color: #ff4069;
	font-weight: bold;
	margin-left: auto;
}

/* 空状态 */
.empty-container {
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 200rpx 40rpx;
	padding-top: 580rpx;
}

.empty-text {
	font-size: 28rpx;
	color: #999999;
}

/* 加载状态 */
.loading-container {
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 100rpx 40rpx;
	padding-top: 480rpx;
}

.loading-text {
	font-size: 28rpx;
	color: #999999;
}

/* 时间选择弹窗 */
.time-popup {
	background-color: #fff;
	max-height: 70vh;
	display: flex;
	flex-direction: column;
}

.popup-header {
	height: 100rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	border-bottom: 1rpx solid #eee;
	flex-shrink: 0;
}

.popup-header .title {
	font-size: 32rpx;
	color: #333;
}

.popup-content {
	max-height: 60vh;
}

.time-option {
	height: 100rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	border-bottom: 1rpx solid #eee;
}

.time-option .option-text {
	font-size: 30rpx;
	color: #333;
}

.time-option:active {
	background-color: #f5f5f5;
}

/* 自定义日期选择弹窗 */
.date-picker-popup {
	background-color: #fff;
}

.date-header {
	height: 90rpx;
	line-height: 90rpx;
	text-align: center;
	font-size: 32rpx;
	color: #333;
	border-bottom: 1px solid #eee;
}

.date-display {
	height: 80rpx;
	line-height: 80rpx;
	text-align: center;
	font-size: 28rpx;
	color: #2979ff;
	border-bottom: 1px solid #eee;
}

.date-tabs {
	display: flex;
	height: 80rpx;
	background: #fff;
	border-bottom: 1px solid #eee;
}

.date-tabs .tab-item {
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 28rpx;
	color: #666;
	position: relative;
}

.date-tabs .tab-item.active {
	color: #2979ff;
}

.date-tabs .tab-item.active::after {
	content: '';
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 2px;
	background-color: #2979ff;
}

.picker-labels {
	height: 80rpx;
	display: flex;
	justify-content: space-around;
	align-items: center;
	background-color: #f8f8f8;
	border-bottom: 1px solid #eee;
}

.picker-labels .label-item {
	flex: 1;
	text-align: center;
	font-size: 28rpx;
	color: #666;
}

.picker-container {
	height: 400rpx;
	position: relative;
}

.picker-container .picker-view {
	width: 100%;
	height: 100%;
}

.picker-container .picker-item {
	height: 80rpx;
	line-height: 80rpx;
	text-align: center;
	font-size: 32rpx;
	color: #333;
}

.picker-actions {
	display: flex;
	height: 100rpx;
	border-top: 1px solid #eee;
}

.picker-actions .picker-btn {
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 32rpx;
}

.picker-actions .picker-btn.cancel {
	color: #333;
	background-color: #fff;
	border-right: 1px solid #eee;
}

.picker-actions .picker-btn.confirm {
	color: #fff;
	background-color: #2979ff;
}
</style>
